<%@page import="com.wowangz.cms.common.mongo.MongoDBManager"%>
<%@page import="com.wowangz.cms.common.utils.MessageObject"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/pageHead.jsp"%>
<%
	MongoDBManager manager = MongoDBManager.getDefaultMongoDBManager();
	Long size = manager.getPictureSize();
	System.out.println(size);
%>
<c:set value="<%=size%>" var="size"></c:set>
<link rel="stylesheet" type="text/css" href="${systemctx}/resources/webuploader/webuploader.css?v=<%=System.currentTimeMillis()%>" />
<link rel="stylesheet" href="${systemctx}/resources/css/fileupload.css?v=<%=System.currentTimeMillis()%>">
<script type="text/javascript" src="${systemctx }/resources/webuploader/webuploader.js?v=<%=System.currentTimeMillis()%>"></script>
<style>
<!--
	#uploader-demo .thumbnail {
    width: 110px;
    height: 110px;
}
#uploader-demo .thumbnail img {
    width: 100%;
}
.uploader-list {
    width: 100%;
    overflow: hidden;
}
.file-item {
    float: left;
    position: relative;
    margin: 0 20px 20px 0;
    padding: 4px;
}
.file-item .error {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    background: red;
    color: white;
    text-align: center;
    height: 20px;
    font-size: 14px;
    line-height: 23px;
}
.file-item .info {
    position: absolute;
    left: 4px;
    bottom: 4px;
    right: 4px;
    height: 20px;
    line-height: 20px;
    text-indent: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    overflow: hidden;
    white-space: nowrap;
    text-overflow : ellipsis;
    font-size: 12px;
    z-index: 10;
}
.upload-state-done:after {
    content:"\f00c";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 32px;
    position: absolute;
    bottom: 0;
    right: 4px;
    color: #4cae4c;
    z-index: 99;
}
.file-item .progress {
    position: absolute;
    right: 4px;
    bottom: 4px;
    height: 3px;
    left: 4px;
    height: 4px;
    overflow: hidden;
    z-index: 15;
    margin:0;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.file-item .progress span {
    display: block;
    overflow: hidden;
    width: 0;
    height: 100%;
    background: #d14 url(../images/progress.png) repeat-x;
    -webit-transition: width 200ms linear;
    -moz-transition: width 200ms linear;
    -o-transition: width 200ms linear;
    -ms-transition: width 200ms linear;
    transition: width 200ms linear;
    -webkit-animation: progressmove 2s linear infinite;
    -moz-animation: progressmove 2s linear infinite;
    -o-animation: progressmove 2s linear infinite;
    -ms-animation: progressmove 2s linear infinite;
    animation: progressmove 2s linear infinite;
    -webkit-transform: translateZ(0);
}
	@-webkit-keyframes progressmove {
	    0% {
	        background-position: 0 0;
	    }
	    100% {
	        background-position: 17px 0;
	    }
	}
	@-moz-keyframes progressmove {
	    0% {
	        background-position: 0 0;
	    }
	    100% {
	        background-position: 17px 0;
	    }
	}
	@keyframes progressmove {
	    0% {
	        background-position: 0 0;
	    }
	    100% {
	        background-position: 17px 0;
	    }
	}
	a.travis {
	  position: relative;
	  top: -4px;
	  right: 15px;
	}
	.delInfo {
	    color: white;
	    background:red;	
	    cursor: pointer;
	    display: inline-block;
	    font-weight: bold;
	    margin-top: -2px;
	    position: absolute;
	    text-align: right;
	    width: 110px;
	    display: none;
    }
	.box_div {
    	margin-right:2px;
    	float:left;
    }
    .delInfo a:link {
		text-decoration:none;
		color:white;
	}
    .delInfo a:HOVER {
		color:white;
		text-decoration:underline;
	}
	.delInfo a {
		margin:5px;
	}
-->
</style>
<script type="text/javascript">
	function showdiv() {
	    document.getElementById("bg").style.display = "block";
	    document.getElementById("show").style.display = "block";
	}
	function hidediv() {
	    document.getElementById("bg").style.display = 'none';
	    document.getElementById("show").style.display = 'none';
	}
	
	$(document).ready(function(){
		var $ = jQuery,
		$btn = $('#ctlBtn'),
        $list = $('#fileList'),
        state = 'pending',
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,
        // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,
        // Web Uploader实例
        uploader;
		var show = '<div id="show">'
	        + '<div class="dialog-title">'
	        + '提示信息'
	        + '<a id="showClose" href="javascript:hidediv()" class="dialog-close">关闭</a>'
	        + '</div>'
	        + '<div id="showText" class="dialog-content">'
	        + '正在上传，请稍等...'
	        + '</div>'
	        + '</div>';
	    var bg = '<div id="bg"></div>';
	    $("body").append(bg).append(show);

	    // 初始化Web Uploader
	    uploader = WebUploader.create({
	        // 自动上传。
	        /* auto: true, */
	        // swf文件路径
	        swf: '${systemctx}/resources/webuploader/Uploader.swf',
	        // 文件接收服务端。
	        server: '${systemctx}/topic/poster/upload.web',
	        // 选择文件的按钮。可选。
	        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	        pick: '#filePicker',
	        // 只允许选择文件，可选。
	        accept: {
	            title: 'Images',
	            extensions: 'gif,jpg,jpeg,bmp,png',
	            mimeTypes: 'image/*'
	        }
	    });

	    // 当有文件添加进来的时候
	    uploader.on( 'fileQueued', function( file ) {
	    	var size = file.size / 1024;
	    	var picSize = eval('${size}') / 1024;
	    	var filesize = "";
	    	if(size > picSize) {
	    		if(picSize / 1024 > 1) {
	    			filesize = (picSize / 1024) + "MB";
	    		} else if (picSize / 1024 / 1024 > 1) {
	    			filesize = (picSize / 1024) + "GB";
				} else {
	    			filesize = (picSize) + "KB";
	    		}
	    		alert("所选图片的大小不能超过" + filesize);
	    		return;
	    	}
   			var $li = $(
	                '<div id="' + file.id + '" class="file-item thumbnail box_div">' +
		                '<div class="delInfo"><a href="javascript:void(0)">删除</a></div>' +    
		                '<img>' +
	                    '<div class="info">' + file.name + '</div>' +
	                    '<p class="state">等待上传...</p>' +
	                '</div>'
	                ),
	            $img = $li.find('img');
	
	        $list.append( $li );
	
	        // 创建缩略图
	        uploader.makeThumb( file, function( error, src ) {
	            if ( error ) {
	                $img.replaceWith('<span>不能预览</span>');
	                return;
	            }
	            $img.attr( 'src', src );
	        }, thumbnailWidth, thumbnailHeight );
	        $(".box_div").find("img").mouseover(function(){
	        	$("#fileList").find('div.delInfo').hide();
	        	$(this).parent().find("div.delInfo").show();
	        });
	        $("div.delInfo").find('a').unbind('click');
	        $("div.delInfo").find('a').bind('click',function(){
	        	var fileId = $(this).parent().parent().attr('id');
	        	uploader.removeFile( fileId );
	        	$(this).parent().parent().remove();
	        });
	    });

	    // 文件上传过程中创建进度条实时显示。
	    uploader.on( 'uploadProgress', function( file, percentage ) {
	        var $li = $( '#'+file.id ),
	            $percent = $li.find('.progress span');
	
	        // 避免重复创建
	        if ( !$percent.length ) {
	            $percent = $('<p class="progress"><span></span></p>')
	                    .appendTo( $li )
	                    .find('span');
	        }
	
	        $percent.css( 'width', percentage * 100 + '%' );
	    });
	
	    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
	    uploader.on( 'uploadSuccess', function( file,response ) {
	        $( '#'+file.id ).addClass('upload-state-done');
	        if(response.resposecode == '<%=MessageObject.ResponseCode.code_200%>') {
		    	$( '#showText').text('<%=MessageResourcesUtils.getMessage(request, "dailyoperation.store.website.alert8")%>.');
				window.setTimeout(function(){ 
					hidediv();
					window.location.href='${systemctx}/topic/poster/queryPosterList.web';
			    	$( '#'+file.id ).find('p.state').text('<%=MessageResourcesUtils.getMessage(request, "dailyoperation.store.website.alert8")%>');
				},1000);
			} else {
				$( '#showText').text(response.message);
				window.setTimeout(function(){ 
					hidediv();
			    	$( '#'+file.id ).find('p.state').html("<span style='color:red'>"+response.message+"</span>");
				},1000);
			} 	
	    });
	
	    // 文件上传失败，现实上传出错。
	    uploader.on( 'uploadError', function( file ) {
	        var $li = $( '#'+file.id ),
	            $error = $li.find('div.error');
	
	        // 避免重复创建
	        if ( !$error.length ) {
	            $error = $('<div class="error"></div>').appendTo( $li );
	        }
	        $( '#'+file.id ).find('p.state').text('');
	        $error.text('上传失败');
	        
	    });
	
	    // 完成上传完了，成功或者失败，先删除进度条。
	    uploader.on( 'uploadComplete', function( file ) {
	        $( '#'+file.id ).find('.progress').remove();
	    });
	    uploader.on('fileDequeued',function(file){
	    	
	    });
	    uploader.on( 'all', function( type ) {
	        if ( type === 'startUpload' ) {
	            state = 'uploading';
	        } else if ( type === 'stopUpload' ) {
	            state = 'paused';
	        } else if ( type === 'uploadFinished' ) {
	            state = 'done';
	        }
	        if ( state === 'uploading' ) {
	            $btn.text('暂停上传');
	        } else {
	            $btn.text('开始上传');
	        }
	    });
	    $btn.on( 'click', function() {
	    	var child = $("#fileList").find('div.file-item');
	    	if(child.length > 0) {
	    		if(child.length > 6) {
	    			alert("每次最多只能上传6张图片，你现在选择了" + child.length + "张");
	    			return ;
	    		}
	    		if ( state === 'uploading' ) {
		            uploader.stop();
		        } else {
		        	showdiv();
		            uploader.upload();
		        }
	    	} else {
	    		alert("<%=MessageResourcesUtils.getMessage(request, "topic.poster.uploadfile.alert")%>")
	    	}
	        /*  */
	    });
	});
</script>
<div class="pageMain">
	<div class="pageTitle">
		<%=MessageResourcesUtils.getMessage(request, "systemmanage.contentmanagement.title")%>
		<span></span>
		<%=MessageResourcesUtils.getMessage(request, "topic.poster.title") %>
		<span></span>
		<%=MessageResourcesUtils.getMessage(request, "topic.poster.add.title")%>
	</div>
	<div class="pageBody">
		<div class="form-group file-upload-div">
			<div id="uploader-demo" class="wu-example">
				<div class="btns" style="margin: 5px;">
					<div id="filePicker" style="float:left;">选择图片</div>
					<button id="ctlBtn" style="float:left;display: inline-block;padding: 7px 15px;text-align:center;border-radius:3px;overflow:hidden;cursor:pointer;position: relative;width:100px;height: 40px;margin-top:1px;" class="btn btn-default">开始上传</button>
				</div>
				<div id="fileList" class="uploader-list"></div>
			</div>
		</div>
	</div>
</div>